<template>
//分类知识页面
  <view class="container">
    <!-- 顶部导航栏 -->
    <header class="header">
      <view class="header-content">
        <view class="header-left">
          <view class="back-btn" @click="goBack">
            <text class="icon">←</text>
          </view>
          <text class="header-title">垃圾分类知识</text>
        </view>
        <view class="header-right">
          <view class="header-icon-btn" @click="viewNotifications">
            <text class="fas fa-bell"></text>
          </view>
          <view class="avatar-container">
            <image 
              class="user-avatar"
              src="https://design.gemcoder.com/staticResource/echoAiSystemImages/72612d1c9d3214233aeeedd4c9e4255d.png"
              mode="aspectFill"
            ></image>
            <view class="status-indicator"></view>
          </view>
        </view>
      </view>
    </header>

    <!-- 主内容区 -->
    <main class="main-content">
      <!-- 垃圾分类分类导航 -->
      <view class="classification-tabs">
        <scroll-view scroll-x="true" class="tabs-scroll" show-scrollbar="false">
          <view class="tabs-container">
            <view 
              v-for="(tab, index) in classificationTabs" 
              :key="index" 
              class="tab-item" 
              :class="{ active: activeTab === index }"
              @click="switchTab(index)"
            >
              <image :src="tab.icon" class="tab-icon"></image>
              <text class="tab-text">{{ tab.name }}</text>
            </view>
          </view>
        </scroll-view>
      </view>

      <!-- 分类介绍卡片 -->
      <view class="classification-card" v-if="selectedClassification">
        <view class="card-header">
          <image :src="selectedClassification.image" class="card-image" mode="aspectFill"></image>
          <view class="card-title-container">
            <text class="card-title">{{ selectedClassification.title }}</text>
            <text class="card-subtitle">{{ selectedClassification.subtitle }}</text>
          </view>
        </view>
        <view class="card-content">
          <text class="content-text">{{ selectedClassification.description }}</text>
        </view>
      </view>

      <!-- 常见物品示例 -->
      <view class="common-items">
        <view class="section-header">
          <text class="section-title">常见物品</text>
        </view>
        <view class="items-grid">
          <view class="item-card" v-for="(item, index) in selectedClassification?.items || []" :key="index">
            <image :src="item.image" class="item-image" mode="aspectFill"></image>
            <text class="item-name">{{ item.name }}</text>
          </view>
        </view>
      </view>

      <!-- 垃圾分类知识要点 -->
      <view class="knowledge-points">
        <view class="section-header">
          <text class="section-title">知识要点</text>
        </view>
        <view class="points-list">
          <view class="point-item" v-for="(point, index) in selectedClassification?.knowledgePoints || []" :key="index">
            <view class="point-number">{{ index + 1 }}</view>
            <text class="point-text">{{ point }}</text>
          </view>
        </view>
      </view>

      <!-- 垃圾分类小测试 -->
      <view class="quiz-section">
        <view class="section-header">
          <text class="section-title">垃圾分类小测试</text>
        </view>
        <view class="quiz-card" @click="startQuiz">
          <image src="/static/quiz-icon.svg" class="quiz-icon"></image>
          <text class="quiz-text">点击开始测试</text>
          <text class="quiz-hint">检验您的垃圾分类知识</text>
        </view>
      </view>
    </main>

    <!-- 自定义底部导航栏 -->
    <view class="custom-tab-bar">
      <view class="tab-bar-item" @click="switchToHome">
        <image :src="'/static/home.svg'" class="tab-bar-icon"></image>
        <text class="tab-bar-text">主页</text>
      </view>
      <view class="tab-bar-item" @click="switchToRecord">
        <image :src="'/static/record.svg'" class="tab-bar-icon"></image>
        <text class="tab-bar-text">记录</text>
      </view>
      <view class="tab-bar-item" @click="switchToMine">
        <image :src="'/static/mine.svg'" class="tab-bar-icon"></image>
        <text class="tab-bar-text">我的</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 垃圾分类分类
      classificationTabs: [
        {
          name: '可回收物', 
          icon: '/static/recyclable-icon.svg',
          type: 'recyclable'
        },
        {
          name: '有害垃圾', 
          icon: '/static/hazardous-icon.svg',
          type: 'hazardous'
        },
        {
          name: '厨余垃圾', 
          icon: '/static/kitchen-icon.svg',
          type: 'kitchen'
        },
        {
          name: '其他垃圾', 
          icon: '/static/other-icon.svg',
          type: 'other'
        }
      ],
      // 当前激活的标签
      activeTab: 0,
      // 各分类详细信息
      classificationDetails: [
        {
          title: '可回收物',
          subtitle: 'Resource Recyclables',
          image: '/static/recyclable-icon.svg',
          description: '可回收物是指适宜回收利用和资源化利用的生活废弃物，如废纸张、废塑料、废玻璃制品、废金属、废织物等。这类垃圾通过综合处理回收利用，可以减少污染，节省资源。',
          items: [
            { name: '报纸', image: '/static/recyclable-icon.svg' },
            { name: '纸箱', image: '/static/recyclable-icon.svg' },
            { name: '塑料瓶', image: '/static/plastic-bottle.svg' },
            { name: '易拉罐', image: '/static/recyclable-icon.svg' },
            { name: '玻璃瓶', image: '/static/recyclable-icon.svg' },
            { name: '旧衣物', image: '/static/recyclable-icon.svg' }
          ],
          knowledgePoints: [
            '可回收物应轻投轻放，清洁干燥、避免污染；',
            '废纸尽量平整，立体包装物请清空内容物，清洁后压扁投放；',
            '有尖锐边角的，应包裹后投放。'
          ]
        },
        {
          title: '有害垃圾',
          subtitle: 'Hazardous Waste',
          image: '/static/hazardous-icon.svg',
          description: '有害垃圾是指对人体健康或者自然环境造成直接或者潜在危害的生活废弃物，如废电池、废灯管、废药品、废油漆及其容器等。这类垃圾需要特殊安全处理。',
          items: [
            { name: '废电池', image: '/static/battery-icon.svg' },
            { name: '废灯管', image: '/static/hazardous-icon.svg' },
            { name: '废药品', image: '/static/hazardous-icon.svg' },
            { name: '废油漆', image: '/static/hazardous-icon.svg' },
            { name: '杀虫剂', image: '/static/hazardous-icon.svg' },
            { name: '体温计', image: '/static/hazardous-icon.svg' }
          ],
          knowledgePoints: [
            '有害垃圾应单独投放至有害垃圾收集容器或专门场所；',
            '废灯管等易破损的有害垃圾应连带包装或包裹后投放；',
            '废药品应连带包装一并投放；',
            '杀虫剂等压力罐装容器，应排空内容物后投放。'
          ]
        },
        {
          title: '厨余垃圾',
          subtitle: 'Kitchen Waste',
          image: '/static/kitchen-icon.svg',
          description: '厨余垃圾是指居民日常生活及食品加工、饮食服务、单位供餐等活动中产生的垃圾，包括丢弃不用的菜叶、剩菜、剩饭、果皮、蛋壳、茶渣、骨头等。这类垃圾主要来源为家庭厨房、餐厅、饭店、食堂、市场及其他与食品加工有关的行业。',
          items: [
            { name: '剩菜剩饭', image: '/static/kitchen-icon.svg' },
            { name: '果皮', image: '/static/kitchen-icon.svg' },
            { name: '菜叶', image: '/static/vegetable-icon.svg' },
            { name: '蛋壳', image: '/static/kitchen-icon.svg' },
            { name: '鱼骨', image: '/static/kitchen-icon.svg' },
            { name: '茶叶渣', image: '/static/kitchen-icon.svg' }
          ],
          knowledgePoints: [
            '厨余垃圾应沥干水分后，投入厨余垃圾收集容器；',
            '大块骨头、贝壳类等不易粉碎的厨余垃圾，应作为其他垃圾投放；',
            '有包装物的厨余垃圾应去除包装物后分类投放，包装物请投放到对应的可回收物或其他垃圾收集容器。'
          ]
        },
        {
          title: '其他垃圾',
          subtitle: 'Residual Waste',
          image: '/static/other-icon.svg',
          description: '其他垃圾是指除可回收物、有害垃圾、厨余垃圾以外的其它生活废弃物。这类垃圾包括砖瓦陶瓷、渣土、卫生间废纸、纸巾等难以回收的废弃物及尘土、食品袋（盒）。',
          items: [
            { name: '餐巾纸', image: '/static/tissue-icon.svg' },
            { name: '污损纸', image: '/static/other-icon.svg' },
            { name: '渣土', image: '/static/other-icon.svg' },
            { name: '陶瓷碎片', image: '/static/other-icon.svg' },
            { name: '尿不湿', image: '/static/other-icon.svg' },
            { name: '烟头', image: '/static/other-icon.svg' }
          ],
          knowledgePoints: [
            '其他垃圾应投入其他垃圾收集容器，并保持周边环境整洁；',
            '对于难以辨识类别的生活垃圾，可投入其他垃圾收集容器；',
            '受污染的纸张、塑料袋等应作为其他垃圾投放。'
          ]
        }
      ]
    };
  },
  computed: {
    // 获取当前选中的分类信息
    selectedClassification() {
      return this.classificationDetails[this.activeTab];
    }
  },
  onLoad() {
    // 页面加载时的初始化
    this.initGarbageData();
  },
  methods: {
    // 初始化垃圾分类数据
    initGarbageData() {
      // 在实际项目中，这里会从API获取垃圾分类数据
      console.log('初始化垃圾分类数据');
    },
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    // 查看通知
    viewNotifications() {
      uni.showToast({
        title: '查看通知功能开发中',
        icon: 'none'
      });
    },
    // 切换分类标签
    switchTab(index) {
      this.activeTab = index;
    },
    // 开始垃圾分类测试
    startQuiz() {
      uni.showToast({
        title: '垃圾分类测试功能开发中',
        icon: 'none'
      });
    },

    // 切换到主页
    switchToHome() {
      uni.switchTab({
        url: '/pages/index/index'
      });
    },
    
    // 切换到记录页面
    switchToRecord() {
      uni.switchTab({
        url: '/pages/record/record'
      });
    },
    
    // 切换到我的页面
    switchToMine() {
      uni.switchTab({
        url: '/pages/mine/mine'
      });
    }
  }
};
</script>

<style>
/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx; /* 为底部导航栏留出空间 */
}

/* 顶部导航栏 */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 999;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 30rpx;
}

.header-left {
  display: flex;
  align-items: center;
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.icon {
  font-size: 36rpx;
  color: #333;
}

.header-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.header-right {
  display: flex;
  align-items: center;
}

.header-icon-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 30rpx;
  position: relative;
}

.avatar-container {
  position: relative;
}

.user-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
}

.status-indicator {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background-color: #52c41a;
  border: 4rpx solid #fff;
}

/* 主内容区 */
.main-content {
  padding-top: 120rpx;
  padding: 120rpx 30rpx 30rpx;
}

/* 垃圾分类分类导航 */
.classification-tabs {
  margin-bottom: 30rpx;
}

.tabs-scroll {
  white-space: nowrap;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
  -webkit-overflow-scrolling: touch; /* iOS */
}

.tabs-scroll::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

.tabs-container {
  display: inline-flex;
  gap: 16rpx;
  padding-bottom: 10rpx;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16rpx 24rpx;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.tab-item.active {
  background-color: #1890ff;
  color: #fff;
  box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.3);
}

.tab-icon {
  width: 80rpx;
  height: 80rpx;
  margin-bottom: 8rpx;
}

.tab-text {
  font-size: 26rpx;
  color: #333;
}

.tab-item.active .tab-text {
  color: #fff;
}

/* 分类介绍卡片 */
.classification-card {
  background-color: #fff;
  border-radius: 30rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 30rpx;
}

.card-header {
  position: relative;
  height: 220rpx;
}

.card-image {
  width: 100%;
  height: 100%;
}

.card-title-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24rpx;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
}

.card-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #fff;
  margin-bottom: 8rpx;
}

.card-subtitle {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.8);
}

.card-content {
  padding: 30rpx;
}

.content-text {
  font-size: 28rpx;
  color: #333;
  line-height: 44rpx;
}

/* 常见物品示例 */
.common-items {
  margin-bottom: 30rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.items-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
}

.item-card {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.item-image {
  width: 120rpx;
  height: 120rpx;
  margin-bottom: 16rpx;
}

.item-name {
  font-size: 26rpx;
  color: #333;
}

/* 垃圾分类知识要点 */
.knowledge-points {
  margin-bottom: 30rpx;
}

.points-list {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.point-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20rpx;
}

.point-item:last-child {
  margin-bottom: 0;
}

.point-number {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  background-color: #1890ff;
  color: #fff;
  font-size: 24rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16rpx;
  flex-shrink: 0;
}

.point-text {
  font-size: 26rpx;
  color: #333;
  line-height: 40rpx;
  flex: 1;
}

/* 垃圾分类小测试 */
.quiz-section {
  margin-bottom: 30rpx;
}

.quiz-card {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.quiz-icon {
  width: 100rpx;
  height: 100rpx;
  margin-bottom: 20rpx;
}

.quiz-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
}

.quiz-hint {
  font-size: 24rpx;
  color: #999;
}

/* 自定义底部导航栏样式 */
.custom-tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  z-index: 999;
}

.tab-bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 180rpx;
  height: 100%;
}

.tab-bar-icon {
  width: 52rpx;
  height: 52rpx;
  margin-bottom: 8rpx;
}

.tab-bar-text {
  font-size: 24rpx;
  color: #8f8f94;
}
</style>